<template>
	<view class="container">
		<!-- 意见描述 -->
		<view class="description">
			<image src="https://community.chuangxiangdianli.com/images/me/important.png" mode=""></image>
			请描述你的遇到的问题，我们将尽力为你解决
		</view>
		<view class="question p30">
			<view 
				v-for="(item, index) in questionArr"
				:key="index"
				:class="index === questionIndex ? 'active' : ''" 
				@click="choseQuestion(index, item.id)">
				{{item.feedback_class_name}}
			</view>
		</view>
		<view class="content p30">
			<textarea @input="sumFont" v-model="feedback_content" maxlength='200' placeholder="描述你的问题" />
			<view>{{ fontNum }}/200</view>
		</view>
		<!-- 上传凭证 -->
		<view class="pic p30">
			<view class='title'>上传凭证（不超过三张）</view>
			<view class="upload">
				<!-- <image src="https://community.chuangxiangdianli.com/images/me/upload.png" mode=""></image> -->
				<u-upload
					:action="action"
					:custom-btn="true"
					max-count='3'
					:header="header"
					name='file'
					:multiple="true"
					:deletable='false'
					:show-progress="false"
					@on-success="successUpload"
				>
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/utils/commonrequest.js'
	export default{
		data() {
			return {
				header: {}, // 图片上传的请求头数据
				baseUrl: baseUrl.baseUrl,
				action: '',
				fontNum: 0, // 输入框内容得长度
				feedback_class_id: '', // 选择反馈的分类id
				questionIndex: 0, // 选择要反馈的问题
				feedback_images: [], // 反馈图片
				feedback_content: '', // 反馈内容 
				questionArr: [{feedback_class_name: 0}], // 要反馈的问题
			}
		},
		onShow() {
			this.getCate()
			this.action = this.baseUrl + 'Mini/feedback/feedback_upload'
			console.log('this.action', this.action)
			this.header.Authorization = 'Bearer ' + uni.getStorageSync('userInfo').token
		},
		methods: {
			//  图片上传
			successUpload(data, index, lists, name) {
				// console.log('上传成功！', data, index, lists, name)
				if (data.status) {
					this.feedback_images.push(data.data)
				}
				console.log(this.feedback_images)
			},
			// 获取反馈的分类数据
			getCate() {
				var that = this
				this.$mrequest({
					url: 'Mini/feedback/catelist',
					method: 'POST',
					callBack: function callBack (res) {
						if (res.status) {
							that.questionArr = res.data
							that.feedback_class_id = res.data[0].id
							that.questionIndex = 0
							console.log('打印的id', that.feedback_class_id)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				})
			},
			// 实时显示输入框内得数字长度
			sumFont(e) {
				this.fontNum = e.detail.value.length
			},
			// 选择反馈问题
			choseQuestion(num, id) {
				if (num === this.questionIndex) return
				this.questionIndex = num
				this.feedback_class_id = id
			},
			//  提交反馈的问题
			submit() {
				var that = this
				if (!this.feedback_content) {
					uni.showToast({
						title: '请描述您的问题',
						icon: 'none'
					})
					return
				}
				let data = {}
				data.feedback_class_id = that.feedback_class_id
				data.feedback_images = that.feedback_images
				data.feedback_content = that.feedback_content
				// console.log('提交data！@', data)
				// return
				that.$mrequest({
					url: 'Mini/feedback/addFeedback',
					method: 'POST',
					data: {
						feedback_class_id: that.feedback_class_id,
						feedback_images: that.feedback_images,
						feedback_content: that.feedback_content
					},
					callBack: function callBack (res) {
						console.log('res', res)
						if (res.status) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						console.log('res', res)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: rgba(247, 246, 249, 1);
	}
	.description{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 31rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding: 42rpx 30rpx;
		background-color: #fff;
		&>image{
			display: block;
			height: 17rpx;
			width: 15rpx;
			margin: 0 10rpx;
		}
	}
	.question{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 70rpx;
		background-color: #fff;
		&>view{
			height: 70rpx;
			width: 142rpx;
			border-radius: 35rpx;
			text-align: center;
			border: 2rpx solid #B5B5B5;
			box-sizing: border-box;
			margin: 15rpx;
		}
		.active{
			color: #FFFFFF;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			border: none;
		}
	}
	.content{
		height: 250rpx;
		width: 100%;
		padding-top: 30rpx;
		background-color: #fff;
		&>textarea{
			height: 170rpx;
			width: 100%;
		}
		&>view{
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
	.pic{
		width: 100%;
		height: 325rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		background-color: #fff;
		margin-top: 15rpx;
		.upload{
			&>image{
				margin-top: 10rpx;
				display: block;
				width: 225rpx;
				height: 225rpx;
			}
			.slot-btn {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgb(244, 245, 246);
				border-radius: 10rpx;
			}
			
			.slot-btn__hover {
				background-color: rgb(235, 236, 238);
			}
		}
	}
	.btn{
		height: 90rpx;
		margin: 150rpx 30rpx 0rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		border-radius: 45rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	
</style>
